<template>
    <div class=" grid grid-cols-5 gap-8   ">
      <div v-for="(person, index) in people" :key="index" class="photo-card">
        <img :src="person.photo" :alt="person.name" class="photo" />
        <div class="caption">
          <p class="name">{{ person.name }}</p>
          <p class="title">{{ person.title }}</p>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">

interface Person {
  name: string
  title: string
  photo: string
}

const props = defineProps<{
  people: Person[]
}>()
  </script>
  
  <style scoped>
  /* .photo-wall {
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; */
    /* border: 1px solid #ddd; */
  /* } */ 
  .photo-card {
    border: 1px solid #ddd;
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    background-color: #fff;
  }
  .photo {
    width: 100%;
    height: auto;
  }
  /* .caption {
    padding: 0.5rem;
  } */
  .name {
    font-weight: bold;
    margin-top: 0.5rem;
  }
  .title {
    color: #666;
  }
  </style>
  